<template>
  <view class="zh-app">
	<view class="header">
		<view class="header-box">
			<swiper
				class="swiper"
				circular
				:indicator-dots="swiperData.indicatorDots" 
				:autoplay="swiperData.autoplay" 
				:interval="swiperData.interval"
				:duration="swiperData.duration"
			>
				<swiper-item v-for="item in bannerData.list" :key="item.id" @click="navWebView(item)">
					<view class="swiper-item">
						<image :src="previewImg(item.imgurl)" class="banner"/>
					</view>
				</swiper-item>
			</swiper>
			<view class="search">
				<view class="search-box display-flex align-center" @click="search" :style="searchData.searchStyle">
					<image src="@/static/icons/search_index_icon.png" class="search-index-icon"/>
					<text class="">{{ searchData.placeholder }}</text>
				</view>
			</view>
		</view>
	</view>	
	<view class="menus display-flex justify-between">
		<view class="item" @click="menuNavTo('')">
			<image :src="IMG_URL + '/index/menu_4.png'" class="menu-icon"/>
			<text class="font-26 font-363636 font-bold">纯棉纱</text>
		</view>
		<view class="item" @click="menuNavTo('30支')">
			<image :src="IMG_URL + '/index/menu_5.png'" class="menu-icon"/>
			<text class="font-26 font-363636 font-bold">30支</text>
		</view>
		<view class="item" @click="menuNavTo('32支')">
			<image :src="IMG_URL + '/index/menu_6.png'" class="menu-icon"/>
			<text class="font-26 font-363636 font-bold">普梳32支</text>
		</view>
		<view class="item" @click="menuNavTo('40支')">
			<image :src="IMG_URL + '/index/menu_7.png'" class="menu-icon"/>
			<text class="font-26 font-363636 font-bold">精梳40支</text>
		</view>
		<view class="item" @click="menuNavTo('28支')">
			<image :src="IMG_URL + '/index/menu_8.png'" class="menu-icon"/>
			<text class="font-26 font-363636 font-bold">28支</text>
		</view>
		
	</view>
	<view class="dynamic display-flex align-center">
		<view class="display-flex align-center left">
			<image :src="IMG_URL + '/index/dynamic.png'" class="dynamic-img"/>
			<text class="font-24">资讯</text>
		</view>
		<view class="flex">
			<swiper
				class="swiper-article"
				circular
				:indicator-dots="false" 
				:autoplay="true" 
				:interval="2000"
				:duration="500"
				:vertical="true"
			>
				<swiper-item v-for="item in articleData.list" :key="item.id" @click="navigateTo('/pages/article/dynamic/index')">
					<view class="display-flex align-center">
						<view class="flex ml-40 font-26 font-302D2D dynamic-text" >
							{{ item.noticeTitle  }}
							<text class="pull-right font-999">{{item.createTime.split(' ')[0]}}</text>
						</view>
						<image src="@/static/icons/right_arrow_light.png" class="right-arrow" />
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<view class="business">
		<image :src="IMG_URL + '/index/trade.png'" class="trade-icon" @click="handleTrade"/>
		<view class="bottom display-flex justify-between">
			<view class="left item display-flex justify-between"  @click="handleService">
				<view>
					<text class="title">一门式服务</text>
					<text class="des">全产业链 优质服务</text>
				</view>
				<image :src="IMG_URL + '/index/service.png'" class="item-icon"/>
			</view>
			<view class="right item display-flex justify-between" @click="handleCertify">
				<view>
					<text class="title">企业认证</text>
					<text class="des">更多权益 专属服务</text>
				</view>
				<image :src="IMG_URL + '/index/certify.png'" class="item-icon"/>
			</view>
		</view>
	</view>
	<view class="goods">
		<view class="tabs display-flex align-center">
			<view class="font-999 font-30">
				<text class="active">现货商城</text>
			</view>
			<text class="ml-10 right-tags">下单即提</text>
		</view>
		<view class="list display-flex justify-between flex-wrap">
			<view class="item" v-for="item in goodsData.list" :key="item.id" 
			@click="navigateTo('/pages/shop/goodsDetail?spckid=' + item.spckid + '&spcwid=' + item.spcwid + '&spbhid=' + item.spbhid)">
				<view class="thumbnail">
					<view class="name">
						<text>{{ item.wpggA }}</text>
					</view>
					<image :src="previewImg(file.url)" mode="widthFix" v-for="file in item.wpggAFileDataList" :key="file.id"/>
				</view>
				<view class="bottom">
					<view class="font-28 font-bold font-262626 title">{{ item.spzs }}</view>
					<view class="display-flex align-center font-999999 font-24 mt-10">
						<text>{{ item.updateTime }}</text>
						<text class="ml-10">{{ item.sheng + item.shi}}</text>
					</view>
					<view class="tags display-flex flex-wrap">
						<text class="tags-right" v-if="item.wpggA">{{ item.wpggA }}</text>
						<text class="tags-right" v-if="item.spcd">{{ item.spcd }}</text>
						<text class="tags-right" v-if="item.spckmc">{{ item.spckmc }}</text>
					</view>
					<view class="content display-flex justify-between align-center">
						<view class="font-EB462E display-flex align-center">
							<text class="font-24">{{ item.price?'¥':'' }}</text>
							<text class="font-34">{{ item.price?item.price:'电议' }}</text>
							<text class="font-34" v-if="item.price">/吨</text>
						</view>
						<!-- <view class="purchase-car-icon" @click.stop="openWeightPopup(item)">
							<text>+</text>
						</view> -->
						<image src="@/static/icons/add_icon.png" class="purchase-car-icon" @click.stop="openWeightPopup(item)"/>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="load-more">
		<u-load-more ref="loadMoreRef"></u-load-more>
	</view>
	<weight-edit-popup :show="showWeightPopup" :data="goodsData.item" @close="closeWeightPopup" @sure="shoppingCartWeightSure"></weight-edit-popup>
  </view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { goods, article, systemApi } from '@/api'
	import { util, tip, nav, system } from '@/utils'
	import { IMG_URL } from '@/utils/constant'
	import type { GoodsData } from '@/@type/goods'
	import type { ArticleData } from '@/@type/article'
	import { onLoad, onShow, onPullDownRefresh, onReachBottom, onShareAppMessage } from '@dcloudio/uni-app';
	import weightEditPopup from '@/pages/shop/components/weight-edit-popup'
	//import { useAuthStore } from '@/store/auth'
	import { IsItCertified } from '@/enum/user'
	import { isextranetEnum } from '@/enum'
	//https://www.bookstack.cn/read/uni-sdk-202005/40d70fcce1f248fb.md
	//const authStore = useAuthStore()
	let isItCertified = ref('')
	const showWeightPopup = ref(false)
	const loadMoreRef = ref()
	const getSearchStyle = () => {
		let statusBarHeight = 0
		let buttonBoundingHeight = 0
		let width = ''
		let top = ''
		statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
		//#ifdef MP-WEIXIN
		buttonBoundingHeight = uni.getMenuButtonBoundingClientRect().top
		width =uni.upx2px(467) + 'px',
		top = ( statusBarHeight + buttonBoundingHeight)/2 + 'px'
		//#endif
		//#ifdef APP-PLUS
		width = uni.upx2px(690) + 'px',
		top = statusBarHeight + 'px'
		//#endif
		return {
			width:width,
			top:top
		}
	}
	const searchData = reactive({
		placeholder:'品种、规格、工艺等',
		searchStyle: getSearchStyle()
	})
	
	onLoad(() => {
		articleList()
		goodsList()
		getBanner()
	})
	
	onShareAppMessage(() => {})
	
	onShow(() => {
		if(nav.isLogin()) {
			//isItCertified.value = authStore.getIsItCertified()
			shoppingCart()
		} else {
			system.setTabBarBadge({
			  index: 2,
			  text: '0'
			})
		}
	})
	
	//广告图
	const bannerData:any = reactive({
		query:{
			dictvalue: "app_index_banner",
			isvalid: "1",
			isextranet:"0"
		},
		list:[],
		total:0,
	})
	const swiperData:any = reactive({
		indicatorDots: false,
		autoplay: false,
		interval: 2000,
		duration: 500
	})
	
	const getBanner = () => {
		systemApi.getBannerList(bannerData.query).then((res:any) => {
			bannerData.list = res.rows
			bannerData.total = res.total
			swiperData.indicatorDots = false
			swiperData.autoplay = false
			if(bannerData.total > 1) {
				swiperData.indicatorDots = false
				swiperData.autoplay = true
			}
		})
	}
	
	const menuNavTo = (data:string) => {
		uni.navigateTo({
			url:'/pages/shop/goodsList?keyword=' + data
		})
	}
	
	//咨询
	const articleData: any = reactive({
		query:{},
		params:{
			pageNum:1,
			pageSize:3,
			status:0,
		},
		list:[],
		total:0
	})
	const articleList = () => {
		article.getNoticeList(articleData.query,articleData.params).then((res: any) => {
			const data: any = res.rows
			data.forEach((item: any) => {
				item.createTime = item.createTime?util.getDate(item.createTime, 'day'):""
				//item.remark = item.remark.length > 30?item.remark.substring(0, 30) + '...': item.remark
				item.noticeTitle = item.noticeTitle.length > 15?item.noticeTitle.substring(0, 15) + '...': item.noticeTitle
			})
			articleData.list = res.rows
		})
	}
	
	const search = () => {
		navigateTo('/pages/shop/search?prevPage=index&placeholder=' + searchData.placeholder)
	}
	
	
	//货物
	const goodsData: any = reactive({
		query:{
			noLoading:false
		},
		params:{
			pageNum:1,
			pageSize:6,
			reasonable:false,
		},
		item:{
			id: '',
			num: 0,
			price: 0,
			spbhid: '',
			spckid: '',
			spcwid: '',
			subtotal: 0,
			weight: 0,
		},
		list:[],
		total:0
	})
	
	const goodsList = (cb?:Function) => {
		goods.getGoodsList(goodsData.query, goodsData.params).then((res:any) => {
			cb && cb()
			const data = res.rows
			data.forEach((item: any) => {
				item.updateTime = item.updateTime?util.getDate(item.updateTime, 'day'):""
			})
			goodsData.list = [...goodsData.list,...data],
			goodsData.total = res.total
		})
	}
	
	
	onReachBottom(() => {
		if(goodsData.params.pageNum * goodsData.params.pageSize > goodsData.total) return loadMoreRef.value.changeStatusNoMore()
		goodsData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			goodsData.query.noLoading = true
			goodsList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(goodsData.params.pageNum * goodsData.params.pageSize > goodsData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})
	
	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	const refresh = () => {
		goodsData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		goodsData.params.pageNum = 1
		goodsData.list = []
		articleData.params.pageNum = 1
		articleData.list = []
		bannerData.list = []
		articleList()
		goodsList()
		getBanner()
	}
	
	const openWeightPopup = (item:any) => {
		if(nav.isCertify()) {
			item.weight = item.upShelvesWeight
			goodsData.item = item
			changeWeightPopup()
		}
		
	}
	
	const closeWeightPopup = () => {
		changeWeightPopup()
	}
	
	const changeWeightPopup = () => {
		showWeightPopup.value = !showWeightPopup.value
	}
	
	const shoppingCartWeightSure = (data:any) => {
		changeWeightPopup()
		purchaseCarAdd(data)
	}
	
	const purchaseCarAdd = (data:any) => { 
		goods.setShoppingCartAdd(data).then((res:any) => {
			tip.showToast('成功加入购物车！')
			shoppingCart()
			// uni.showModal({
			// 	title:'添加购物车',
			// 	content:'添加成功',
			// 	confirmColor:'#1769ff',
			// 	confirmText:'去结算',
			// 	success:(res:any) => {
			// 		if(res.confirm) {
			// 			switchTab('/pages/shop/shoppingCart')
			// 		}
			// 	}
			// })
		})
	}
	
	const shoppingCart = () => {
		goods.getShoppingCart({noJump:true}).then((res:any) => {
			const len = res.data && res.data.length > 9?'9+': res.data.length.toString()
			system.setTabBarBadge({
			  index: 2,
			  text: len
			})
		})
	}
	
	const handleCertify = () => {
		nav.goCertify()
	}
	
	const handleService = () => {
		navigateTo('/pages/service/index')
	}

	const handleTrade = () => {
		navigateTo('/pages/trade/index')
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
	const switchTab = (url:string) => {
		uni.switchTab({url:url})
	}
	
	const previewImg = (url:string) => {
		return util.previewImg(url)
	}
	
	const navWebView = (data:any) => {
		if(data.isextranet === isextranetEnum.yes && data.url) {
			uni.navigateTo({
				url:'/pages/webview/index?url=' + data.url
			})
		} else if(data.isextranet === isextranetEnum.no && data.url) {
			nav.allNavigateTo(data.url)
		}
	}
	
</script>
<style lang="scss" scoped>
.zh-app {
	padding-bottom:20rpx;
	.header {
		width: 750rpx;
		height: 500rpx;
		background-color: #fff;
		-webkit-transform:rotate(0deg);
		.header-box {
			width: 750rpx;
			height: 500rpx;
			overflow: hidden;
			position:relative;
			border-bottom-left-radius:350rpx 30rpx;
			border-bottom-right-radius:350rpx 30rpx;
			-webkit-border-bottom-left-radius:350rpx 30rpx;
			-webkit-border-bottom-right-radius:350rpx 30rpx;
			-webkit-backface-visibility: hidden;
			-webkit-transform: translate3d(0, 0, 0);
			//border-radius: 100% 100% 100% 100% / 0% 0% 30% 30%;
			.search {
				//padding-top: var(--status-bar-height);
				.search-box {
					//width:467rpx;
					height:64rpx;
					background-color:#fff;
					border-radius: 32rpx;
					position:relative;
					left:30rpx;
					z-index:999rpx;
					.search-index-icon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
					}
					text {
						margin-left:10rpx;
						font-size:26rpx;
						color:#bfbfbf;
					}
				}
			}
			
			.swiper {
				width: 750rpx;
				height: 500rpx;
				//background-color: $uni-bg-card-color;
				position:absolute;
				.swiper-item {
					width: 750rpx;
					height: 500rpx;
					//background:#f8f8f8;
					.banner {
						width:750rpx;
						height:500rpx;
					}
				}
			}
		}
		
	}
	
	.menus {
		padding:47rpx 45rpx 0rpx;
		background-color: $uni-bg-card-color;
		.item {
			text-align:center;
			.menu-icon {
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin:17rpx auto 0;
			}
		}
	}
	.dynamic {
		padding:76rpx 30rpx 0rpx;
		background-color: $uni-bg-card-color;
		.left {
			padding-left:15rpx;
			text {
				color:#070707;
			}
		}
		.swiper-article {
			height:38rpx;
		}
		.dynamic-img {
			width: 32rpx;
			height: 32rpx;
		}
		.dynamic-text {
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;  /*要显示的行数*/
			-webkit-box-orient: vertical;
		}
		.right-arrow {
			width: 12rpx;
			height: 22rpx;
			margin-left:36rpx;
		}
	}
	.business {
		padding:56rpx 30rpx 0rpx;
		font-size:0;
		background: linear-gradient(0deg, #F7F7F7, #FFFFFF);
		.trade-icon {
			width: 690rpx;
			height: 174rpx;
		}
		.bottom {
			margin-top: 20rpx;
			.item {
				width: 335rpx;
				height: 150rpx;
				border-radius: 16px;
				background-color:#f8f8f8;
				&.left {
					background-color: #F9F2DF;
				}
				&.right {
					background-color: #EAF5F9;
				}
				.title {
					font-size: 30rpx;
					color:#252525;
					font-weight: bold;
					padding:41rpx 33rpx 0 31rpx;
					display:block;
				}
				.des {
					padding:18rpx 0 0 31rpx;
					font-size: 22rpx;
					color:#6D6D6D;
					display:block;
				}
				.item-icon {
					width:80rpx;
					height:80rpx;
					margin: 35rpx 24rpx 0 0rpx;
				}
			}
		}
	}
	.goods {
		padding:55rpx 0rpx 25rpx;
		.tabs {
			padding:0 30rpx;
			padding-bottom:30rpx;
			.active {
				font-weight: bold;
				font-size:36rpx;
				color:#262626;
				//display:inline-block;
			}
			.right-tags {
				width: 98rpx;
				height: 32rpx;
				line-height: 32rpx;
				background: linear-gradient(90deg, #E16F1A, #D91203);
				border-radius: 16rpx;
				text-align: center;
				color:#fff;
				font-size: 18rpx;
				display:inline-block;
			}
		}
		.list {
			padding:0 23rpx;
			.item {
				width: 345rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top:15rpx;
				.thumbnail {
					width: 345rpx;
					height: 325rpx;
					background: #f8f8f8;
					border-radius: 10rpx;
					text-align:center;
					position: relative;
					overflow: hidden;
					.name {
						position: absolute;
						bottom:25rpx;
						left:33rpx;
						width: 84rpx;
						height: 42rpx;
						line-height: 42rpx;
						background: #EB462E;
						z-index:1;
						color:#fff;
						font-size:24rpx;	
						border-radius: 12rpx;
					}
					image {
						width: 100%;
						height:100%;
					}
				}
				.bottom {
					margin:14rpx 20rpx;
					.title {
						width:100%;
						word-break:break-all;
						display:-webkit-box;
						-webkit-line-clamp:1;
						-webkit-box-orient:vertical;
						overflow:hidden;
					}
					.tags {
						//margin-top: 20rpx;
						.tags-right {
							text-align:center;
							color:#666666;
							padding:0 8rpx;
							height:28rpx;
							line-height: 28rpx;
							font-size: 20rpx;
							margin:26rpx 8rpx 0 0;
							border-radius: 6px;
							white-space:nowrap;
							border:1rpx solid #D8D8D8;
							max-width:100rpx;
							text-overflow:ellipsis;
							overflow:hidden;
						}
						
					}
					.content {
						margin-top:15rpx;
						.purchase-car-icon {
							width:46rpx;
							height:46rpx;
						}
					}
				}
			}
		}
	}
}
</style>
